<template>
  <div id="board-box">
     <div style="line-height: 16px; font-weight: bold; font-size: 16px">
        <i :class="'iconfont '+ log.icon" :style="'color:'+log.color"></i>
        {{log.projectName}} <br>
        <span  v-if="log.projectId>1" style="font-size:10px;padding-left: 18px">
         {{log.planStartTime}} 至 {{log.planEndTime}}  <span v-if="log.projectId>1"> 状态：{{getDescription(log)}} </span>
        </span>
      </div>
      <div style="position: relative; line-height: 20px; padding: 15px 0;">
        <i class="el-icon-document"></i> {{log.memberName}} {{log.logTime}} 日志： <br>
        <span style="padding-left:20px;">{{log.logContent}}</span>
      </div>
      <comment :userInfo="userInfo" :members="members" :log="log"></comment>
    <ding-login ref="gate"></ding-login>
    <el-button size="mini" style="position:fixed; top:5px; right: 5px;z-index: 9;" @click="jumpToHome()">打开主页</el-button>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import DingLogin from '@/components/ding/ding-login'
  import Comment from '@/components/ding/comment'

  export default {
    data () {
      return {
        log:{
          comment:[],
          showComment:true
        },
        members: [],
        loading: false
      }
    },
    mixins: [dingMixin],
    computed:{

    },
    mounted(){
      this.$refs.gate.login().then(()=>{
        //this.run_dd_config();
        this.loadMembers().then(data=>this.members = data);
        this.getLogById()
      })
    },
    components:{
      Comment, DingLogin
    },
    methods: {
      jumpToHome(){
        this.$router.push('wpb-log');
      },
      toggleComment(item){
        item.showComment=!item.showComment
        this.$forceUpdate()
      },
      getLogById(){
        let logId = this.$route.query.logId
        this.$http({
          url: this.$http.adornUrl(`/wpb/projectlog/info/${logId}`),
          method: 'post',
          data: this.$http.adornData({})
        }).then(({data}) => {
            if (data && data.code === 0) {
              this.log = data.data;
              this.log.showComment = true;
/*              this.$refs.c.$forceUpdate()*/
            }
          }
        ).catch(error=>{
          console.info(error)
        })
      },
      getDescription(logItem){
        if(logItem.status==1){
          return "进行中";
        }
        else if(logItem.status==2){
          return "已完成";
        }
        else if(logItem.status==3){
          return "已逾期";
        }
        else if(logItem.status==4){
          return "逾期已完成";
        }
      }
    }
  }
</script>
<style scoped>

  #board-box{
    padding: 20px;
    margin-bottom: 40px;
    line-height: 30px;
  }

  .avatar{
    width: 36px;
    height: auto;
    margin-right: 0px;
    border-radius: 100%;
    vertical-align: middle;
  }

  .foot div{
    float:left;
    height:50px;
    width:33%;
    padding:5px;
    text-align: center;
  }

  .colorBoard{
    position: fixed;
    top: 50px;
    left:0px;
    padding:5px;
    background: white;
    width:100%;
  }

  .pj_flag{
    width:100%;
    height:100%;
  }

  i:before{
    font-size: 14px;
  }

  .chart-box {
    min-height: 400px;
  }
  .feedback{
    position: relative;
    left:15px;
  }

  .delc{
    cursor: pointer; margin-left: 15px; color:gray; font-size: 10px;
  }

</style>
